import React,{useEffect} from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import Icon from 'react-native-vector-icons/Ionicons';
import I18n from '../utils/i18n';

import HomePage from '../screens/HomePage';
import MoodSettingPage from '../screens/MoodSettingPage';
import ProfilePage from '../screens/ProfilePage';
import SettingsPage from '../screens/SettingsPage';
import MoodHistoryPage from '../screens/MoodHistoryPage';
import appsFlyer from "react-native-appsflyer";

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const HomeStack = () => (
    <Stack.Navigator>
        <Stack.Screen name="Home" component={HomePage} options={{ title: I18n.t('home') }} />
        <Stack.Screen name="MoodSetting" component={MoodSettingPage} options={{ title: I18n.t('MoodSetting') }} />
        <Stack.Screen name="MoodHistory" component={MoodHistoryPage} options={{ title: I18n.t('MoodHistory') }} />
    </Stack.Navigator>
);

const App = () => {
    useEffect(() => {
        start_A();
    }, []);

    const start_A = async () => {
        const eventName = 'User-Start-A';
        const eventValues = {
            af_content_id: '1',
            af_content_type: 'A'
        };

        try {
            const res = await appsFlyer.logEvent(eventName, eventValues);
            console.log(res);
        } catch (err) {
            console.error(err);
        }
    };

    return (
        <NavigationContainer>
            <Tab.Navigator
                screenOptions={({ route }) => ({
                    tabBarIcon: ({ focused, color, size }) => {
                        let iconName;

                        if (route.name === 'HomeTab') {
                            iconName = focused ? 'home' : 'home-outline';
                        } else if (route.name === 'Profile') {
                            iconName = focused ? 'person' : 'person-outline';
                        } else if (route.name === 'Settings') {
                            iconName = focused ? 'settings' : 'settings-outline';
                        }

                        return <Icon name={iconName} size={size} color={color} />;
                    },
                    headerShown: false, // 隐藏 Tab Navigator 的头部
                })}
            >
                <Tab.Screen
                    name="HomeTab"
                    component={HomeStack}
                    options={{
                        title: I18n.t('home'),
                        headerShown: false // 确保 HomeTab 不显示头部
                    }}
                />
                <Tab.Screen
                    name="Profile"
                    component={ProfilePage}
                    options={{
                        title: I18n.t('ProfilePage'),
                        headerShown: true // 显示个人中心的头部
                    }}
                />
                <Tab.Screen
                    name="Settings"
                    component={SettingsPage}
                    options={{
                        title: I18n.t('SettingsPage'),
                        headerShown: true // 显示设置页面的头部
                    }}
                />
            </Tab.Navigator>
        </NavigationContainer>
    );
};

export default App;
